<template>
  <el-dialog
    title="目录注册"
    :close-on-click-modal	="false"
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="handleClose">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
      <!-- <el-form-item label="目录级别:" prop="level">
        <el-select v-model="ruleForm.level" placeholder="请选择目录级别" size="small" style="width: 100%;">
          <el-option
            v-for="item in directoryLevel"
            :key="item.id"
            :label="item.label"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="上级目录名称:">
        <el-tree :data="treeData" ref="treeForm" :props="defaultProps" @check="handleCheck" show-checkbox node-key="id" :check-strictly="true"></el-tree>
        <!-- <el-select v-model="ruleForm.parentId" placeholder="请选择上级目录名称" size="small" style="width: 100%;">
          <el-option
            v-for="item in parentDirectory"
            :key="item.id"
            :label="item.label"
            :value="item.id"
          ></el-option>
        </el-select> -->
      </el-form-item>
      <el-form-item label="目录名称:" prop="catalogName">
        <el-input v-model="ruleForm.catalogName" size="small" style="width: 100%;"></el-input>
      </el-form-item>
      <el-form-item label="排序:" prop="sort">
        <el-input v-model="ruleForm.sort" size="small" style="width: 100%;" type="number"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose" size="small">取 消</el-button>
      <el-button type="primary" @click="save" size="small">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import * as API from '../../api/resourceManagement/index.js'
export default {
  props: {
    dialog: {
      type: Object,
      default: () => {}
    },
    treeData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      dialogVisible: this.dialog.dataDirectoryVisible,
      ruleForm: {
        // level: 1,
        catalogName: null,
        sort: 1
      },
      rules: {
        // level: [
        //   { required: true, message: '请选择目录级别', trigger: 'change' }
        // ],
        catalogName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '请输入排序', trigger: 'blur' }
        ]
      },
      directoryLevel: [
        {
          id: 1,
          label: '一级目录'
        },
        {
          id: 2,
          label: '二级目录'
        },
        {
          id: 3,
          label: '三级目录'
        }
      ],
      parentDirectory: [
        {
          id: '1',
          label: '数据库'
        }
      ]
    }
  },
  mounted() {
    if (this.treeData) {
      this.$nextTick(() => {
        this.$refs.treeForm.setCheckedKeys([0])
      })
    }
  },
  methods: {
    handleCheck(node, list) {
      if (list.checkedKeys.length === 2) {
        this.$refs.treeForm.setCheckedKeys([node.id])
      }
    },
    handleClose() {
      this.$refs.ruleForm.resetFields()
      this.$emit('colseDataDirectory')
    },
    save() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          const id = this.$refs.treeForm.getCheckedKeys()
          console.log(id, 'id')
          const data = {
            catalogName: this.ruleForm.catalogName,
            parentId: id[0],
            // level: this.ruleForm.level,
            sort: this.ruleForm.sort
          }
          API.managementAddCatalog(data).then(res => {
            if (res.code === 200) {
              this.$message.success('新增成功！')
              this.handleClose()
            }
          })
        }
      })
    }
  }
}
</script>

<style>

</style>
